<template>
  <div id="data-view">
    <dv-loading v-if="tileData.loading">
      <div color-white>Loading...</div>
    </dv-loading>
    <div id="main-container" v-else>
      <el-icon class="full-icon" @click="handleFullScreen"
        ><FullScreen
      /></el-icon>
      <top-header :tileType="tileData.tileType" />

      <div class="main-content">
        <digital-flop :tileData="tileData" />

        <div class="block-left-right-content">
          <ranking-board :tileData="tileData" />

          <!-- <div class="block-top-bottom-content"> -->
            <!-- <div class="block-top-content"> -->
              <rose-chart :tileData="tileData" />
              <line-chart :tileData="tileData" />
            <!-- </div> -->

            <!-- <cards :tileData="tileData" /> -->
          <!-- </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="tileData">
import { ref, reactive, onMounted } from 'vue'
import topHeader from './tileDatasPage/topHeader.vue'
import digitalFlop from './tileDatasPage/digitalFlop.vue'
import rankingBoard from './tileDatasPage/rankingBoard.vue'
import roseChart from './tileDatasPage/roseChart.vue'
import lineChart from './tileDatasPage/lineChart.vue'
// import waterLevelChart from './tileDatasPage/waterLevelChart.vue'
// import scrollBoard from './tileDatasPage/scrollBoard.vue'
// import cards from './tileDatasPage/cards.vue'
import { getData } from '../../api'

let tileData = reactive({
  loading: true
})
let fullFlag = ref(false)
const handleFullScreen = () => {
  fullFlag.value = !fullFlag.value
}
onMounted(async () => {
  const res = await getData()
  const result = res.data
  if (result.success) {
    console.log('------------------------', result.data)
    // 使用 Object.assign 来更新 tileData，而不是重新赋值整个对象
    Object.assign(tileData, result.data)
    tileData.loading = false
  }
})
</script>

<style scoped>
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;
  position: relative;
}
#main-container {
  background-image: url('./img/bg.png');
  background-size: 100% 100%;
  box-shadow: 0 0 3px blue;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.block-left-right-content {
  /* flex: 1; */
  height: calc(80% - 20px);
  display: flex;
  margin-top: 20px;
  justify-content: space-around;
}

.block-top-bottom-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-left: 20px;
}

.block-top-content {
  height: 100%;
  display: flex;
  flex-grow: 0;
  box-sizing: border-box;
  padding-bottom: 20px;
  justify-content: space-between;
}
.full-icon {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 28px;
  cursor: pointer;
  z-index: 999;
}
</style>
